<template lang="pug">
  .minimap(ref="miniMap", v-show="isShow")
    .mask(@click="handleHide")
    .map-wrapper
      .map-head
        .ctrl-box-top.pos-a.tac
          .icon.hand(@click="handleHide")
            i.iconfont.icon-close
      .map-body
        .map-box.pos-r(ref="mapBox")
          img(:src="mapImg")
          .point
            .item(
              :class="{'active': currentPoint == index }",
              v-for="(point, index) in formatMapList",
              :style="[styleObj[index]]",
              @click.stop="handleClick(point.scene_id, index)")
              .circle(
                v-if="currentPoint != index",
                :style='{width: isBigBtn ? "20px" : "12px", height: isBigBtn ? "20px" : "12px"}')
</template>

<script>
let timer = null
import { hasMiniMap } from '@/utils/menu'
import { handleSwitchScene } from '@/utils/scene'
import { isMobile, isPc, isPad } from '@/utils'

export default {
  data() {
    return {
      isShow: false,
      isHandClose: false,
      mapImg: '',
      num: 20,
      miniMapData: null,
      formatMapList: [],
      styleObj: [],
      bgStyle: { "background-image": "url('/static/images/scan.png')" },
      currentPoint: 0,
      isBigBtn: false,
      maxScle: 4,
      mapCfg: {
        mapwidth: 720,
        pointwidth: 12,
        pointheight: 12,
        curpointwidth: 30,
        curpointheight: 30
      }
    }
  },
  mounted() {
    this.$vgo.on('minimap:toggle', () => {
      let data = hasMiniMap(this.$krp.getSceneId())

      if(data) {
        this.isShow = !this.isShow
        this.miniMapData = data.miniMapObj
        this.getMap(this.miniMapData)
      }else {
        this.$vgo.tip('当前场景无导览图!')
      }
    })
  },
  methods: {
    getMap(mapList) {
      this.mapImg = $globalconfig.URLS.API + mapList.map_images
      this.formatMapList = []
      this.styleObj = []
      let list = mapList.mappointList

      list.map((item, idx) => {
        this.styleObj.push({
          left: `${item.x}px`,
          top: `${item.y}px`,
          transform: `translate(-50%, -50%) rotate(${Number(item.degrees).toFixed(2)}deg)`
        })

        // 当前小地图点，添加背景图片
        if(item.scene_id == this.$krp.getSceneId()) {
          this.currentPoint = idx

          this.styleObj = Object.assign(this.styleObj, {
            width: `${this.mapCfg.curpointwidth}px`,
            height: `${this.mapCfg.curpointheight}px`,
            backgroundSize: '100% 100%',
            backgroundImage: `url(${$globalconfig.URLS.API}krpano/images/scan.png)`,
          })
        }
      })
      this.formatMapList = list
    },
    handleClick(id, index) {
      let sceneList = []
      this.$store.getters.sceneGroup.map(item => {
        sceneList = sceneList.concat(item.scenelist)
      })

      let sceneItem = sceneList.filter(item => item.scene_id == id)

      // 清除上次热点的背景图片
      this.styleObj[this.currentPoint].backgroundImage = `url()`
      this.styleObj[this.currentPoint].width = this.mapCfg.pointwidth
      this.styleObj[this.currentPoint].height = this.mapCfg.pointheight

      this.currentPoint = index
      // 触发场景分组，更新当前场景与分组的高亮状态
      this.$vgo.emit('sync:scene', sceneItem[0].scene_id)
    },
    handleHide() {
      clearInterval(timer)
      this.isShow = false
    }
  },
  beforeDestroy() {
    clearInterval(timer)
  },
  watch: {
    isShow(val) {
      if(val) {
        timer = setInterval(() => {
          this.num = this.$krp.getView().hlookat
        }, 200)
      }
      else {
        clearInterval(timer)
      }
    },
    num(val) {
      let list = this.formatMapList
      let sceneId = this.$krp.getSceneId()
      if(this.styleObj.length) {

        this.styleObj[this.currentPoint].backgroundImage = 'url()'
        list.map((item, index) => {
          if(sceneId == item.scene_id) {
            this.styleObj[index].width = this.mapCfg.curpointwidth + 'px'
            this.styleObj[index].height = this.mapCfg.curpointheight + 'px'
            this.styleObj[index].backgroundSize = '100% 100%'
            this.styleObj[index].transform = `translate(-50%, -50%) rotate(${item.degrees + Math.floor(val)}deg)`
            this.styleObj[index].backgroundImage = `url(${$globalconfig.URLS.API}krpano/images/scan.png)`

            this.currentPoint = index
          }
        })
        this.formatMapList = list
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/styles/mixin.styl'
@import '../../../assets/styles/color.styl'

.minimap
  full-cover()
  z-index: 100
  .mask
    full-cover()
    background-color: rgba($black, .5)
  .ctrl-box-top
    top: 3px
    right: 3px
    z-index: 14
    .icon
      width: 40px
      height: 30px
      line-height: 30px
      border-radius: 0
      transition: .6s background
      &:hover
        background-color: rgba($black, .5)
        i
          color: $white
      i
        font-size: 30px
        color: $black
  .map-wrapper
    pos-center()
    width: 720px
    box-sizing: border-box
  .map-head
    position: relative
    top: 0
  .map-body
    height: 450px
    overflow-y: auto
    .map-box
      height: 450px
      img, .point
        position: absolute
        left: 0
        top: 0
        width: 100%
        transition: all .6s
        z-index: -1
      .point
        height: 100%
        z-index: 2
        .item
          position: absolute
          left: 50%
          top: 50%
          .circle
            width: 12px
            height: 12px
            border: 2px solid rgba($white, .9)
            border-radius: 50%
            background: $primary
</style>
